<template>
  <view class="box" v-if="modelValue">
    <view class="confirm">
      <image class="path" :style="{ width: PropsData.width, height: PropsData.height }" v-if="PropsData.path"
        :src="PropsData.path"></image>
      <view class="title" v-if="title">{{ title }}</view>
      <image v-if="PropsData.showRightClons" class="clons" @click='rightClons' src="@/static/inco/comclons.png"></image>
      <view class="content-box">
        <text class="textBox">{{ PropsData.content }}</text>
      </view>
      <view class="bnt">
        <view v-if="bnt.cancel">
          <view class="clos set-bnt" @click='cancelfun'>{{ bnt.cancel }}</view>
        </view>
        <view v-if="bnt.ok && !bnt.openSetting">
          <view class="ok set-bnt" @click="okfun">{{ bnt.ok }}</view>
        </view>
        <!--        <button class="set-bnt" type="primary" v-if="bnt.openSetting" @click="okfun">开启定位</button>-->
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { watch } from 'vue'
// import { isFunc } from '@/tool/uni.public';
const emit = defineEmits(['input', 'update:modelValue', 'cancel', 'ok', 'rightClons']);
const PropsData = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  path: {
    type: String,
    default: ''
  },
  showRightClons: { //  弹窗右侧是否显示关闭按钮
    type: Boolean,
    default: true
  },
  title: { // 标题 可控制是否显示和 标题内容
    type: String,
    default: '请开启定位'
  },
  content: { // 显示内容
    type: String,
    default: '请允许“出租车”使用您的定位，方便为您寻找附近的车辆为您提供出行服务'
  },
  text: { // 显示内容
    type: String,
    default: ''
  },
  bnt: { // 控制按钮是否显示
    type: Object,
    default: {
      cancel: '取消',
      ok: '确定',
      openSetting: true,
    }
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '30vh'
  }
});

// watch(PropsData.bnt, (newvalue: any, lodvalue: any) => {
//   console.log(newvalue, lodvalue,'------------------------');
// },{
//   deep:true,
//   immediate:true
// });

// 取消
const cancelfun = () => emit('cancel');
// 确认
const okfun = () => emit('ok');

const rightClons = () => emit('rightClons');
</script>

<style scoped>
.box {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9900;
}

.clons {
  width: 60rpx;
  height: 60rpx;
  position: absolute;
  right: 20rpx;
  top: 20rpx;
}

.confirm {
  width: 90%;
  background: #fff;
  border-radius: 20rpx;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: 0 auto;
  /* box-shadow: 20px 20px 60px #dde0e2,
    -20px -20px 60px #e8ebec; */
  z-index: 9;
  padding-top: 27rpx;
  padding-right: 23rpx;
  padding-left: 23rpx;
}

.title {
  width: 100%;
  height: 100rpx;
  font-size: 36rpx;
  font-family: Source Han Sans SC;
  font-weight: bold;
  line-height: 100rpx;
  text-align: center;
  color: #000000;
}

.content-box {
  display: block;
  width: 90%;
  margin: auto;
  padding: 20rpx;
  font-size: 32rpx;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #333333;
  text-align: center;
}

.textBox {
  display: block;
}

.bnt {
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 200rpx;
  margin-bottom: 20rpx;
}

.bnt view,
.bnt button {
  width: 90%;
  text-align: center;
  margin: auto;
  border-radius: 12rpx;
  font-family: Source Han Sans SC;
  font-weight: 400;
}

.bnt button {
  height: 100rpx;
}

.clos {
  line-height: 100rpx;
  color: #666666;
  background: #F1F3F2;
}

.ok {
  line-height: 100rpx;
  color: #FFFFFF;
  background: #27AA3D;
}

.clos,
.ok {
  font-size: 30rpx;
  border: none !important;
  padding-left: 14px;
  padding-right: 14px;
  position: relative;
  box-sizing: border-box;
}

.path {
  margin: auto;
  /* width: 100%; */
  /* object-fit: cover; */
}
</style>
